<template>
	<div class="disk-manage" v-loading="loading" element-loading-text="获取磁盘信息中...">
		<div class="operation">
			<el-button type="primary" @click="nodeInfo">刷新</el-button>
		</div>
		<div class="content">
			<div class="managed disk">
				<h3>已管理磁盘</h3>
				<el-table
					ref="managedRef"
					border
					:data="state.managedTable.data"
					highlight-current-row
					row-key="deviceId"
					height="50vh"
					@current-change="handleSelectManaged"
				>
					<el-table-column prop="deviceId" label="磁盘ID" show-overflow-tooltip />
					<el-table-column prop="deviceType" label="类型" show-overflow-tooltip :width="100" />
					<el-table-column prop="devicePath" label="路径" show-overflow-tooltip />
					<el-table-column prop="devicePgs" label="PGS" show-overflow-tooltip :width="100" />
					<el-table-column prop="deviceUsedSize" label="用量" show-overflow-tooltip :width="100" >
						<template #default="{row}">
							{{ formatUnits(row.deviceUsedSize) }}
						</template>
					</el-table-column>
					<el-table-column prop="deviceTotalSize" label="容量" show-overflow-tooltip :width="100" />
				</el-table>
			</div>
			<div class="operation">
				<el-button
					type="primary"
					:loading="state.managedTable.btnLoading"
					:disabled="state.managedTable.currentRow==null"
					@click="removeManage"><el-icon><ele-DArrowRight /></el-icon>移除管理</el-button>
				<el-button
					type="primary"
					class="mt15"
					:loading="state.unmanagedTable.btnLoading"
					:disabled="state.unmanagedTable.currentRow==null"
					@click="addManage"><el-icon><ele-DArrowLeft /></el-icon>添加管理</el-button>
			</div>
			<div class="unmanaged disk">
				<h3>未管理磁盘</h3>
				<el-table
					ref="unmanagedRef"
					border
					:data="state.unmanagedTable.data"
					highlight-current-row
					row-key="deviceId"
					height="50vh"
					@current-change="handleSelectUnmanaged"
				>
					<el-table-column prop="deviceId" label="磁盘ID" show-overflow-tooltip />
					<el-table-column prop="deviceType" label="类型" show-overflow-tooltip :width="100" />
					<el-table-column prop="devicePath" label="路径" show-overflow-tooltip />
					<el-table-column prop="deviceTotalSize" label="容量" show-overflow-tooltip :width="100" />
				</el-table>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue';
import { useNodeApi } from '/@/api/node';
import { NodeDataRow } from '../index.vue';
import { NodeDiskData } from '/@/types';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatUnits } from '/@/utils/other';

interface DiskManage{
	managedTable:{
		data:NodeDiskData[];
		currentRow:NodeDiskData|undefined;
		btnLoading:boolean;
	};
	unmanagedTable:{
		data:NodeDiskData[];
		currentRow:NodeDiskData|undefined;
		btnLoading:Boolean;
	};
}

const nodeApi = useNodeApi();
const props = defineProps<{
    currentRow:NodeDataRow|undefined;
}>();
const { currentRow } = toRefs(props);
const loading = ref(false);
const state = reactive<DiskManage>({
	managedTable: {
		data: [],
		currentRow: undefined,
		btnLoading: false
	},
	unmanagedTable: {
		data: [],
		currentRow: undefined,
		btnLoading: false
	}
});
const managedRef = ref();
const unmanagedRef = ref();
// node info
const nodeInfo = () => {
	loading.value = true;
	nodeApi.nodeInfo({ nodeName: currentRow.value?.nodeName }).then(res => {
		state.managedTable.data = [];
		state.unmanagedTable.data = [];
		for (let item of res.data.devices) {
			if (item.deviceStatus === 0) {
				state.managedTable.data.push(item);
			} else {
				state.unmanagedTable.data.push(item);
			}
		}
		// Table radio echo
		state.managedTable.currentRow = state.managedTable.data.find(item => item.deviceId === state.managedTable.currentRow?.deviceId);
		managedRef.value?.setCurrentRow(state.managedTable.currentRow);
		state.unmanagedTable.currentRow = state.unmanagedTable.data.find(item => item.deviceId === state.unmanagedTable.currentRow?.deviceId);
		unmanagedRef.value?.setCurrentRow(state.unmanagedTable.currentRow);
	}).catch(() => {
		state.managedTable.data = [];
		state.unmanagedTable.data = [];
	}).finally(() => {
		loading.value = false;
	});
};
nodeInfo();
// Managed table radio
const handleSelectManaged = (data:NodeDiskData|undefined) => {
	state.managedTable.currentRow = data;
};
// UnManaged table radio
const handleSelectUnmanaged = (data:NodeDiskData|undefined) => {
	state.unmanagedTable.currentRow = data;
};
// add manage
const addManage = () => {
	ElMessageBox.confirm(
		`确认新增磁盘(${state.unmanagedTable.currentRow?.deviceId})？`,
		'提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(() => {
		state.unmanagedTable.btnLoading = true;
		nodeApi.addDiskToNode({ nodeName: currentRow.value?.nodeName, devicePath: state.unmanagedTable.currentRow?.devicePath }).then(() => {
			ElMessage.success('添加【新增磁盘】任务成功');
			unmanagedRef.value!.setCurrentRow();
		}).finally(() => {
			state.unmanagedTable.btnLoading = false;
		});
	});
};
// remove manage
const removeManage = () => {
	ElMessageBox.confirm(
		`确认移除磁盘(${state.managedTable.currentRow?.deviceId})，移除磁盘后磁盘资源文件会被销毁？`,
		'提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(() => {
		state.managedTable.btnLoading = true;
		nodeApi.removeDiskFromNode({ osdId: state.managedTable.currentRow?.osdId }).then(() => {
			ElMessage.success('添加【移除磁盘】任务成功');
			managedRef.value!.setCurrentRow();
		}).finally(() => {
			state.managedTable.btnLoading = false;
		});
	});
};
</script>
<style lang="scss" scoped>
.disk-manage{
	.operation{
		text-align: right;
	}
	.content{
		display: flex;
		.disk{
			width: calc((100% - 150px) / 2);
			h3{
				line-height: 40px;
			}
		}
		.operation{
			width: 150px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.el-button{
				margin-left: 15px;
				margin-right: 15px;
			}
		}
	}
}
</style>